import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class UserList extends Component {
  state = {
    list: [],
  }

  componentDidMount() {
    PubSub.subscribe('loadList', (_, data) => {
      this.setState({ list: data })
    })
  }

  render() {
    const { list } = this.state

    return (
      <div className="row">
        {list.map((item) => (
          <div className="card" key={item.id}>
            <a
              href="https://github.com/reactjs"
              target="_blank"
              rel="noreferrer"
            >
              <img src={item.avatar_url} alt="avatar" style={{ width: 100 }} />
            </a>
            <p className="card-text">{item.login}</p>
          </div>
        ))}
      </div>
    )
  }
}
